---
title: "Text Field"
description: A basic input field for entering short text, commonly used for forms, user input, and data entry.
order: 2
published: true
references: ["https://react-spectrum.adobe.com/react-aria/TextField.html#props"]
---


## Basic

A text field is a box where you can type in text, like your name or email.
<How minW60 toUse="forms/text-field/text-field-demo" />

## Installation

```bash
npx shadcn@latest add @intentui/text-field
```

## Composed components
<Composed components={['field']}/>

## Manual installation
```bash
npm i react-aria-components @heroicons/react
```

<SourceCode toShow='text-field'/>

## Anatomy
```
import { TextField } from "@/components/ui/text-field"

<TextField
  name="name"
  type="text"
  label="Name"
  description="Enter your name"
  placeholder="John Doe"
  errorMessage="This field is required"
  prefix="..."
  suffix="..."
/>
```

## Suffix and prefix
Enhance your TextField by adding a prefix or suffix. Whether it’s text or icons, it’s flexible to fit your design.
<How minW60 toUse="forms/text-field/text-field-prefix-suffix-demo" />

## Suffix with Button
Add a button to the suffix by simply including it in the suffix prop. While you can do the same with a prefix, it’s more common to see it as a suffix.
<How minW60 toUse="forms/text-field/text-field-suffix-button-demo" />

## Revealable
When using a text field as a password input, you may want the option to reveal the password.
<How minW60 toUse="forms/text-field/text-field-revealable-demo" />

## Validation
In this example, we’ll ensure it’s treated as a strict requirement.
<How minW60 toUse="forms/text-field/text-field-validation-demo" />

## Controlled
Manage the TextField value through the `value` prop for controlled usage.
<How minW60 toUse="forms/text-field/text-field-controlled-demo" />

## Uncontrolled
Manage the TextField value through the `defaultValue` prop for uncontrolled usage.
<How minW60 toUse="forms/text-field/text-field-uncontrolled-demo" />

## Description
You can add a description to the text field by using the `description` prop.
<How minW60 toUse="forms/text-field/text-field-description-demo" />

## Readonly
Set the TextField to readonly, preventing any edits.
<How minW60 toUse="forms/text-field/text-field-readonly-demo" />

## Disabled
When the TextField is disabled, it becomes non-editable and appears inactive.
<How minW60 toUse="forms/text-field/text-field-disabled-demo" />
